Component({
  data: {
    timeSegments: [
      // 按时间顺序从0-12点排列（关键修复）
      // { start: 0, end: 1, color: '#eee' },    // 0-1点：默认灰色（与canvas背景一致）
      // { start: 1, end: 2, color: '#ffd700' }, // 1-2点：黄色（目标位置）
      // { start: 2, end: 2.5, color: '#00ff00' },// 2-2:30：绿色
      // { start: 2.5, end: 10, color: '#eee' }, // 2:30-10点：默认灰色
      // { start: 10, end: 12, color: '#ff0000' }// 10-12点：红色（覆盖到12点末尾）
    ]
  },
  methods: {
    init(sm1List) {
      let timeSegments = [];
      let obg = {};
      //一个长数组，数组里面的3代表离枕，1和2代表仰卧和侧卧，从离枕切换到其他睡姿的时候，初始睡眠为3，如果后续下一时刻睡姿有变化，则睡眠深浅度减1,例如，下一时刻睡姿有了变化，睡眠深浅度为3-1=2，即浅2；如后续下一时刻睡姿没有变化，则睡眠深浅度加1,最大值为6最小值为1，例如，下一时刻睡姿有了变化，睡眠深浅度为3+1=4，即深1。我需要按照这个长数组，复制出一个新的数组
      let sm1ListDepth = this.calculateSleepDepth(sm1List);
      sm1ListDepth.forEach((num, index) => {
        obg = {
          start: index / 4,
          end: index / 4 + 0.25,
          color: num == 0 ? '#F3D65B' : '#FF8732',
        }
        timeSegments.push(obg)
      })
      console.log('timeSegments', timeSegments);
      this.setData({
        timeSegments,
      }, () => {
        this.drawClock();
      })
    },
    /**
     * 计算睡眠深度数组
     * @param {number[]} positions - 睡姿数组 (1:仰卧, 2:侧卧, 3:离枕)
     * @returns {number[]} 睡眠深度数组 (1-6)
     */
    calculateSleepDepth(positions) {
      // 输入验证
      if (!Array.isArray(positions)) throw new Error('输入必须是数组');
      if (positions.length === 0) return [];

      // 创建新数组（不修改原数组）
      const depths = [];

      // 处理首元素（离枕初始深度为3）
      depths[0] = positions[0] === 3 ? 3 : 1;

      // 遍历处理后续元素
      for (let i = 1; i < positions.length; i++) {
        const prevPos = positions[i - 1];
        const currentPos = positions[i];
        const prevDepth = depths[i - 1];

        // 规则1: 从离枕切换到其他睡姿 → 深度减1
        if (prevPos === 3 && (currentPos === 1 || currentPos === 2)) {
          depths[i] = Math.max(prevDepth - 1, 1);
        }
        // 规则2: 睡姿保持不变 → 深度加1
        else if (currentPos === prevPos) {
          depths[i] = Math.min(prevDepth + 1, 6);
        }
        // 规则3: 非离枕睡姿间的切换
        else {
          // 扩展规则：所有睡姿切换都减少深度
          depths[i] = Math.max(prevDepth - 1, 1);
        }
      }
      return depths;
    },
    drawClock() {
      const query = wx.createSelectorQuery().in(this);
      query.select('.clock-canvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          const dpr = wx.getSystemInfoSync().pixelRatio;

          // 适配视网膜屏
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          ctx.scale(dpr, dpr);

          // 基础参数
          const center = res[0].width / 2; // 圆心坐标
          const radius = center * 0.8; // 圆半径（占容器80%）
          const startAngle = -Math.PI / 2; // 调整起始角度为12点方向

          // 设置线条端点为圆润样式（关键修改）
          ctx.lineCap = 'round';

          // 绘制背景灰圈（整体轮廓）
          ctx.beginPath();
          ctx.arc(center, center, radius, 0, 2 * Math.PI);
          ctx.strokeStyle = '#eee';
          ctx.lineWidth = 10; // 圆圈粗细
          ctx.stroke();

          // 绘制时间段颜色（关键逻辑）
          this.data.timeSegments.forEach(segment => {
            // 时间转弧度：12小时对应2π弧度，每小时=π/6弧度
            const startRad = startAngle + (segment.start * Math.PI / 6);
            const endRad = startAngle + (segment.end * Math.PI / 6);

            ctx.beginPath();
            ctx.arc(center, center, radius, startRad, endRad);
            ctx.strokeStyle = segment.color;
            ctx.lineWidth = 10;
            ctx.stroke();
          });

          // 移除原中心小圆点绘制代码（关键删除）
          // ... 原中心小圆点绘制代码已删除 ...
        });
    }
  }
});